detective-scss

What is detective-scss?

The detective-scss npm package is designed for analyzing SCSS (Sassy CSS) files to find and extract import statements. This can be particularly useful in build tools and bundlers that need to understand dependencies between SCSS files to correctly assemble them. It parses SCSS content and returns an array of strings, each representing an import found within the file.

What are detective-scss's main functionalities?

Extract import statements from SCSS content

This feature allows you to pass SCSS content as a string to the detective function, which then returns an array of the import paths found within that content. It's useful for dependency resolution and bundling processes.

const detective = require('detective-scss');
const content = `$importedVar: #123;
@import 'another-file';
body { color: $importedVar; }`;
const imports = detective(content);
// imports would be ['another-file']

Other packages similar to detective-scss

postcss-import

postcss-import is a PostCSS plugin to transform @import rules by inlining content. It differs from detective-scss by not only detecting imports but also inlining them as part of the PostCSS processing pipeline, making it more suited for direct use in CSS build processes.

node-sass-import

node-sass-import is a tool for resolving import statements in SCSS files similar to detective-scss. However, it is specifically tailored for use with the Node.js bindings of libsass (node-sass), offering a more integrated experience for users of that library.

README

detective-scss

Find the dependencies of an scss file

npm install detective-scss

Note: This is specific to the .scss style syntax of the Sass preprocessor. For Sass support, please see node-detective-sass.

It's the SASS counterpart to detective, detective-amd, and detective-es6.

• The AST is generated using the gonzales-pe parser.

Usage

const fs = require('fs');
const detective = require('detective-scss');

const content = fs.readFileSync('styles.scss', 'utf8');

// list of imported file names (ex: '_foo.scss', '_foo', etc)
const dependencies = detective(content);

// or to also detect any url() references to images, fonts, etc.
const allDependencies = detective(content, { url: true });

Options

• url (optional): (Boolean) also detect any url() references to images, fonts, etc.

Related

• node-sass-lookup if you want to map a sass/scss dependency to a file on your filesystem.
• node-precinct if you want to also support finding dependencies for JavaScript and other languages.

License

MIT